<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目第2~5次产前随访服务记录表</span>
    </div>
    <el-form :model="form" label-width="140px" label-position="left"       ref="formRef" :rules="formRules">
      <el-divider content-position="left">编号</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName"  type="text"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCardNo">
            <el-input v-model="form.idCardNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="填表日期" prop="completionDate">
            <el-date-picker
              v-model="form.completionDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			   value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="项目">
            <el-select v-model="form.item" style="width: 100%">
              <el-option
                v-for="item in project"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访方式">
            <el-select v-model="form.followUpType" style="width: 100%">
              <el-option
                v-for="item in followUpMode"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="孕周">
            <el-input v-model="form.gestationalAge"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="产前机构名称">
            <el-input v-model="form.prenatalInspectionAgencyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="主诉">
            <el-input v-model="form.chiefComplaint"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">产科检查</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="体重">
            <el-input v-model="form.weight" placeholder="(kg)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="宫底高度" prop="palaceHeight">
            <el-input v-model="form.palaceHeight" placeholder="(cm)"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="腹围" prop="abdominalCircumference">
            <el-input
              v-model="form.abdominalCircumference"
              placeholder="(cm)"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="胎位">
            <el-input v-model="form.fetalPosition"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="胎心率" prop="fetalHeartRate">
            <el-input v-model="form.fetalHeartRate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="血压(mmHg)" prop="bloodPressure">
            <el-input
              v-model="form.bloodPressure"
              placeholder="收缩压"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="血压(mmHg)">
            <el-input
              v-model="form.diastolicPressure"
              placeholder="舒张压"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="血红蛋白" prop="hemoglobin">
            <el-input v-model="form.hemoglobin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="尿蛋白" prop="urineProtein">
            <el-input v-model="form.urineProtein"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="辅助检查其他">
            <el-input v-model="form.examinationOthers"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="血清学产前筛查">
            <el-select v-model="form.prenatalScreening" style="width: 100%">
              <el-option
                v-for="item in prenatalScreening"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="血清学产前筛查结果">
            <el-select
              v-model="form.prenatalScreeningResultArr"
              multiple
              style="width: 100%"
              @change="seChange1"
            >
              <el-option
                v-for="item in prenatalScreeningResult"
                :key="item.id"
                :label="item.name"
                :value="item.name"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="分类">
            <el-select v-model="form.classification" style="width: 100%">
              <el-option
                v-for="item in classification"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="指导">
            <el-select
              v-model="form.guide"
              multiple
              style="width: 100%"
              @change="seChange2"
            >
              <el-option
                v-for="item in guidance"
                :key="item.id"
                :label="item.name"
                :value="item.name"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12" v-if="[2].includes(form.classification)">
          <el-form-item label="异常（分类）">
            <el-input v-model="form.classificationOther"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item
            label="其他(指导)"
            v-if="showGuidance"
          >
            <el-input v-model="form.guidance"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-divider content-position="left">转诊</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊有无">
            <el-select v-model="form.ifReferral" style="width: 100%">
              <el-option
                v-for="item in ifReferral"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="原因">
            <el-input v-model="form.reason"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊机构">
            <el-input v-model="form.department"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊科室">
            <el-input v-model="form.referraldepartment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊联系人">
            <el-input v-model="form.contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊联系方式" prop="contactPhoneNo">
            <el-input v-model="form.contactPhoneNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="结果">
            <el-select v-model="form.conclusion" style="width: 100%">
              <el-option
                v-for="item in result"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="下次随访日期" prop="nextFollowupDate">
            <el-date-picker
              v-model="form.nextFollowupDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			   value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生">
            <el-input v-model="form.followDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="居民签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
	  <el-row type="flex" class="submitSty">
	    <HButton type="add" @click="submit('formRef')">提交</HButton>
	  </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  project,
  followUpMode,
  prenatalScreening,
  prenatalScreeningResult,
  classification,
  guidance,
  ifReferral,
  result,addSecondInspect
} from "@/api/followForms/secondInspect";
import { inputValidator, IDValid ,phoneValid} from "@/utils/validate";
import axios from "axios";
import { addResident } from '@/api/followForms/followForms'
export default {
  data() {
    return {
      formRules: {
        userName: inputValidator,
        idCardNo: IDValid,
        completionDate: inputValidator,
        contactPhoneNo:phoneValid,
        nextFollowupDate:inputValidator,
        palaceHeight:inputValidator,
        abdominalCircumference:inputValidator,
        fetalHeartRate:inputValidator,
        bloodPressure:inputValidator,
        hemoglobin:inputValidator,
        urineProtein:inputValidator
      },
      showGuidance:false,
      form: {},
      prenatalScreeningResultArr: [],
      guidanceArr: [],
      guide:[],
      fileList: [],
      fileList1: [],
      fileList2: [],
      project: project,
      followUpMode: followUpMode,
      prenatalScreening: prenatalScreening,
      prenatalScreeningResult: prenatalScreeningResult,
      classification: classification,
      guidance: guidance,
      ifReferral: ifReferral,
      result: result,
    };
  },
  created() {},
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let datas={
            prenatalScreeningResult:this.form.prenatalScreeningResult,
            idCardNo:this.form.idCard,
            pregnancyWeek:this.form.gestationalAge,
            diastolicPressure:this.form.diastolicPressure,
            bloodPressure:this.form.bloodPressure,
            chiefComplaint:this.form.chiefComplaint,
            classification:this.form.classification,
            doctorSignature:this.form.pictures,
            followUpDate:this.form.completionDate,
            followUpType:this.form.followUpType,
            guide:this.form.guide,
            hemoglobin:this.form.hemoglobin,
            item:this.form.item,
            nextFollowupDate:this.form.nextFollowupDate,
            obstetricExamination:{
              abdominalCircumference:this.form.abdominalCircumference,
              fetalHeartRate:this.form.fetalHeartRate,
              fetalPosition:this.form.fetalPosition,
              palaceHeight: this.form.palaceHeight,
            },
            others:this.form.examinationOthers,
            prenatalInspectionAgencyName:this.form.prenatalInspectionAgencyName,
            prenatalScreening:this.form.prenatalScreening,
            referral:{
              conclusion:this.form.conclusion,
              contactName:this.form.contactName,
              contactPhoneNo:this.form.contactPhoneNo,
              department:this.form.department,
              reason:this.form.reason
            },
            signature:this.form.residentName,
            urineProtein:this.form.urineProtein,
            weight:this.form.weight,
            ifReferral:this.form.ifReferral,
            referraldepartment:this.form.referraldepartment,
            followDoctor:this.form.followDoctor,
            sceneName:this.form.sceneName
          }

          if(this.form.classificationOther){
            datas.classificationOther=this.form.classificationOther
          }

          if(this.form.guidance){
            datas.guidance=this.form.guidance
          }

          addSecondInspect(datas).then(res=>{
            if(res.code="AA000000"){
              this.$message.success(res.message);
              this.form={};
            }
          })









        } else {
          return false;
        }
      });


    },
	// validate(data){
	// var name = 	data.userName
	// var idCard = 	data.idCard
	// if(name==null||name==''){
	// 	alert("请输入姓名！")
	// 	return false;
	// }
	//  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	//    if(reg.test(idCard) === false)
	//    {
	//        alert("身份证输入不合法");
	//        return  false;
	//    }
	//    return true;
  //
	// },
    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //血清学产前筛查结果选择
    seChange1(value) {
      this.form.prenatalScreeningResult =
        this.prenatalScreeningResultArr.toString();
      this.select(value, this.prenatalScreeningResult);
    },
    //指导选择
    seChange2(value) {
      this.form.guide=value
      this.form.guide.forEach(item =>{
        if(item == 5){
          this.showGuidance=true
        }

      })
      console.log("================",this.form.guide)
      // this.form.guide = this.guidanceArr.toString();
      // this.form.guide.forEach(item =>{
      //   showGuidance
      // })
    },
    //上传图片
    async uploadImage() {

      let formData = new FormData();
      if (this.fileList.length > 0) {
        this.fileList.map((item) => {
          formData.append("images", item.raw);
        });
        formData.append("token", this.$store.state.token);
        axios({
          method: "POST",
          url: this.uploadImgUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            "token":this.$store.state.token,
          },
          withCredentials: false,
          data: formData,
        }).then((res) => {
          if (res.data.code == "AA000000") {
            this.form.pictures = res.data.data;

            console.log("555555555555",this.form.pictures)
          }
        });
      }

      let formData1 = new FormData();
      if (this.fileList1.length > 0) {
        this.fileList1.map((item) => {
          formData1.append("images", item.raw);
        });
        formData1.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.uploadImgUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            token:this.$store.state.token,
          },
          withCredentials: false,
          data: formData1,
        }).then((res1) => {
          if (res1.data.code == "AA000000") {
            this.form.residentName = res1.data.data;
          }
        });
      }









      let formData2 = new FormData();
      if (this.fileList2.length > 0) {
        this.fileList2.map((item) => {
          formData2.append("images", item.raw);
        });
        formData2.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.uploadImgUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            token:this.$store.state.token,
          },
          withCredentials: false,
          data: formData2,
        }).then((res2) => {
          if (res1.data.code == "AA000000") {
            this.form.sceneName = res2.data.data;
          }
        });
      }









    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
     onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
       this.uploadImage();

    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
      this.uploadImage();
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
      this.uploadImage();
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 20%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
